<template>
	<div>
		<div class="title-div">
			<h2 class="title">新歌速递</h2>
			<span class="sub-title">畅想一百首新歌</span>
		</div>
		<el-table
				:data="songsList"
				stripe
				style="width: 100%" background-color="#dfdfdf" default-active="/pageone" :router="true" active-text-color="#F56C6C">
			<el-table-column
					type="index"
					width="50">
			</el-table-column>
			<el-table-column label="音乐标题">
				<template v-slot="{ row }">
					<div class="name-wrap">
						<span @click="play(row.id)" class="item">{{ row.name }}</span>
						<!--<span v-if="row.mvid !== 0" class="iconfont icon-MV" @click="toMv(row.mvid)"></span>-->
					</div>
					<span style="color:gray; font-size:1px" v-if="row.alias.length !== 0">{{ row.alias[0] }}</span>
				</template>
			</el-table-column>
			<el-table-column
					prop="artists[0].name"
					label="歌手"
					width="200">
			</el-table-column>
			<el-table-column
					prop="album.name"
					label="专辑"
					width="200">
			</el-table-column>
			<el-table-column
					prop="duration"
					label="时间">
			</el-table-column>
		</el-table>
		<div style="height: 200px">
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "Songs",
		data(){
			return{
				songsList:[],
				url:'',
				count:'',
				page:'1',
			};
		},
		methods:{
			play(id){
				axios({
					url:"https://autumnfish.cn/song/url",
					methods: "get",
					params:{
						id
					},
				}).then(res=>{
					this.$store.state.url = res.data.data[0].url;
				})
			},
			showSongs(){
				axios({
					url:'https://autumnfish.cn/top/song',
					method:'get',
					param:{
						type:0
					}
				}).then(res=>{
					console.log(res.data.data)
					this.songsList= res.data.data
					console.log(this.songsList[1].name)
					for(let i=0 ;i<this.songsList.length;i++){
						let min =parseInt(this.songsList[i].duration/1000/60)
						let sec =parseInt(this.songsList[i].duration/1000%60)
						if(min<10){
							min='0'+min
						}
						if(sec<10){
							sec='0'+sec
						}
						this.songsList[i].duration = min+":"+sec
					}
				})
			}

		},

		created() {
			this.showSongs();
		}

	}
</script>

<style type="text/css">
	.title-div{
		display: flex;
		align-items: flex-end;
	}
	.title{
		margin-right: 10px;
	}

	.sub-title{
		font-size: 15px;
		color: #bebebe;
	}
</style>